<template>
    <div class="keyboard-box">
        <ul class="input-list">
            <li v-for="(item,index) in inputList" :key="item.id" @click.stop="showKeyboard">
                <input readonly :type="isClear" v-model="item.value">
                <span class="cursor" v-if="cursorIndex === index"></span>
            </li>
            <p v-if="isEnter" class="warning-txt">请输入完整密码!</p>
        </ul>
        <div :class="['keyboard-bottom',isShowKeyboard?'wake-up':'']">
            <ul class="keyboard-type-list">
                <li :class="[typeIndex == index ? 'keyboard-type-active':'']" v-for="(item,index) in keyboardTypeList" :key="item.id" @click.stop="chackType(index,item.id)">
                    <span>{{item.title}}</span>
                </li>
                <div class="hidden-icon">
                    <img src="../../../public/img/down.png" alt="">
                </div>
            </ul>
            <div class="keyboard-list-box">
                <ul class="keyboard-list">
                    <li v-for="item in keyCodes[keyType]" :key="item.code" :class="[chackKeyType]" @click.stop="getKeyboardCode(item.code)">
                        <span>{{item.code}}</span>
                    </li>
                </ul>
                <div class="function-keys">
                    <div class="backspace" @click.stop="backSpaceEvent">
                        <span>退格</span>
                    </div>
                    <div class="delete-all" @click.stop="emptyInputList">
                        <span>清空</span>
                    </div>
                    <div class="enter" @click.stop="enterEvent">
                        <span>完成</span>
                    </div>
                    <div class="is-clear" @click.stop="showClearEvent">
                        <span>明/密文</span>
                    </div>
                    <div class="switch" @click.stop="chackCapital" v-show="keyType == 'lowercase' || keyType == 'capital'">
                        <p>大小写</p>
                        <img class="switch-icon" src="../../../public/img/switch.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script src="./index.js"></script>
<style>
@import './index.css';
</style>